<template>
  <a-modal
    :visible="visible"
    :title="$t('对账批次详情')"
    @cancel="handleClose"
    :footer="false"
  >
    <a-descriptions :column="2" size="small" bordered>
      <a-descriptions-item :label="$t('批次号')">
        {{ record?.batchNo }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('批次名称')">
        {{ record?.batchName }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('总笔数')">
        {{ record?.totalCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('匹配笔数')" class="match-count">
        {{ record?.matchCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('不匹配笔数')" class="unmatch-count">
        {{ record?.unmatchCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('总金额')">
        ¥{{ record?.totalAmount ? record.totalAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('匹配金额')" class="match-count">
        ¥{{ record?.matchAmount ? record.matchAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('差异金额')" class="unmatch-count">
        ¥{{ record?.unmatchAmount ? record.unmatchAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('对账人')">
        {{ record?.reconciliationBy }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('对账时间')">
        {{ record?.reconciliationTime }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('备注')" :span="2">
        {{ record?.remark || '-' }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script lang="ts" setup>
import type { OrderReconciliationBatchVO } from '@/api/order/reconciliation/types';

const props = defineProps<{
  visible: boolean;
  record: OrderReconciliationBatchVO | null;
}>();

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

// 关闭
function handleClose() {
  emit('update:visible', false);
}
</script>

<style scoped lang="less">
.match-count {
  :deep(.arco-descriptions-item-value) {
    color: #52C41A;
  }
}

.unmatch-count {
  :deep(.arco-descriptions-item-value) {
    color: #FF4D4F;
  }
}
</style> 